<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <view class="nav-btn back-btn" @click="goBack">
        <uni-icons type="arrowleft" size="20" color="#333"></uni-icons>
      </view>
      <view class="nav-title">待办事项</view>
      <view class="nav-btn refresh-btn" @click="refresh">
        <uni-icons type="reload" size="20" color="#333"></uni-icons>
      </view>
    </view>
    
    <!-- WebView容器 -->
    <view class="webview-container">
      <web-view 
        :src="webviewUrl" 
        @message="onMessage"
      >
      </web-view>
      
      <!-- 加载提示 -->
      <view v-if="loading" class="loading-mask">
        <view class="loading-content">
          <uni-icons type="spinner-cycle" size="30" color="#667eea"></uni-icons>
          <text class="loading-text">页面加载中...</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      webviewUrl: 'http://mytools.yutang1314.fun:9000',
      loading: true
    }
  },
  
  onLoad() {
    // 页面加载时显示加载状态
    this.loading = true
  },

  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
    
    // 刷新页面
    refresh() {
      this.loading = true
      // 通过添加时间戳强制刷新
      const timestamp = new Date().getTime()
      this.webviewUrl = `http://mytool.yutang1314.fun:9000?t=${timestamp}`
    },
    
    // WebView加载完成
    onLoad() {
      this.loading = false
    },

    // // WebView加载出错
    // onError(e) {
    //   this.loading = false
    //   console.error('WebView加载出错:', e)
    //   uni.showToast({
    //     title: '页面加载失败',
    //     icon: 'none'
    //   })
    // },
    
    // 接收WebView发送的消息
    onMessage(e) {
      console.log('接收到WebView消息:', e)
    }
  }
}
</script>

<style scoped>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 15px;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  z-index: 999;
}

.nav-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.webview-container {
  flex: 1;
  position: relative;
}

.loading-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading-text {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}
</style>